<!--
 * @Author: [you name]
 * @Date: 2021-11-05 10:52:31
 * @LastEditors: [you name]
 * @LastEditTime: 2021-11-05 16:42:57
 * @Description: 
-->
<template>
  <div class="employee">
    <!-- 查找区域 -->
    <div class="found">
      <el-form
        :inline="true"
        :model="queryParams"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryParams.roleId"
            clearable
            placeholder="请选择顾客名称"
          >
            <el-option
              v-for="(item, index) in categories"
              :key="index"
              :label="item.username"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryParams.type"
            clearable
            placeholder="请选择交易类型"
          >
            <el-option label="收益" value="收益"></el-option>
            <el-option label="提现" value="提现"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="请选择状态"
          >
            <el-option label="正常" value="正常"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pageQueryEmployee">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData.list" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="transferMoney" label="交易金额" width="180">
      </el-table-column>
      <el-table-column prop="transferTime" label="交易时间"> </el-table-column>
      <el-table-column prop="type" label="交易类型"> </el-table-column>
      <el-table-column label="状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status == '正常'" type="success" size="mini"
            >{{ scope.row.status }}
          </el-tag>
          <el-tag v-else type="danger" size="mini"
            >{{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
    </el-table>

    <!-- 分页查询 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableData.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="tableData.size"
      layout="total, sizes, prev, pager, next"
      :total="tableData.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import request from "@/utils/request";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      tableData: {},
      queryParams: {
        page: 1,
        pageSize: 10,
      },
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
         value1: '',
         value2: ''
    };
  },
  //   静态属性
  computed: {
    ...mapState("employee", ["categories"]),
  },
  methods: {
    ...mapActions("employee", ["findAllEmployeeCategories"]),
    // 分页查询顾客账单信息
    pageQueryEmployee() {
      // 过滤查询参数，将空字符串的键值对删除掉
      for (let key in this.queryParams) {
        if (this.queryParams[key] == "") {
          delete this.queryParams[key];
        }
      }
      console.log(this.queryParams);
      request
        .get("/account/pageQueryEmployeeAccount", {
          params: this.queryParams,
        })
        .then((res) => {
          this.tableData = res.data;
        });
    },
    // 分页size-change事件
    handleSizeChange(pageSize) {
      // 点击分页容量，将最新的pageSize设置到数据模板
      this.queryParams.pageSize = pageSize;
      // 重新调用分页查询的方法，做数据重载
      this.pageQueryEmployee();
    },
    // 分页current-change事件
    handleCurrentChange(page) {
      this.queryParams.page = page;
      this.pageQueryEmployee();
    },
  },
  created() {
    this.pageQueryEmployee(); //分页查询顾客账单
    this.findAllEmployeeCategories();
  },
};
</script>

<style>
</style>
